<template>
    <div class="content">
        <div class="top-box">
            <div class="top-item cog">
                <i class="item-icon icon-cog"></i>
                <span class="top-item-title">Building</span>
                <span class="top-item-nub">{{buildingNub}}</span>
            </div>
            <div class="top-item coffee">
                <i class="item-icon icon-coffee"></i>
                <span class="top-item-title">Idle</span>
                <span class="top-item-nub">{{idleNub}}</span>
            </div>
            <el-row class="top-item">
                <el-col :span="8">
                    <div class="right-top-title">ALL</div>
                    <div class="right-top-nub">{{allNub}}</div>
                </el-col>
                <el-col :span="8">
                    <div class="right-top-title">PHYSICAL</div>
                    <div class="right-top-nub">{{physicalNub}}</div>
                </el-col>
                <el-col :span="8">
                    <div class="right-top-title">VIRTUAL</div>
                    <div class="right-top-nub">{{virtualNub}}</div>
                </el-col>
            </el-row>
        </div>
        <div class="tab-search">
            <el-tabs v-model="activeName" type="card" class="left-tabs fl">
                <el-tab-pane label="ALL" name="">
                    <span slot="label" class="tab-search-pane">All</span>
                </el-tab-pane>
                <el-tab-pane label="PHYSICAL" name="physical">
                    <span slot="label" class="tab-search-pane">Physical</span>
                </el-tab-pane>
                <el-tab-pane label="VIRTUAL" name="virtual">
                    <span slot="label" class="tab-search-pane">Virtual</span>
                </el-tab-pane>
            </el-tabs>
            <div class="tab-search-middle fl">
                <div class="search-input-box">
                    <i class="icon-search"></i>
                    <input>
                </div>
            </div>
            <el-tabs v-model="activeListType" type="card" class="right-tabs fr">
                <el-tab-pane name="card">
                    <i slot="label" class="icon-th-card list-btn"></i>
                </el-tab-pane>
                <el-tab-pane name="list">
                    <i slot="label" class="icon-th-list list-btn"></i>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div v-for="l in listData" :key="l.id" class="list-item">
            <div :class="[l.os, 'list-img']"></div>
            <div class="list-top">
                <i class="icon-desktop"></i>
                <div class="list-top-left">
                    <span class="list-name">{{l.name}}</span>
                    <span :class="l.status">{{l.status}}</span>
                </div>
                <span class="list-ip"><i class="icon-info"></i>{{l.ip}}</span>
                <span class="list-folder"><i class="icon-folder"></i>{{l.location}}</span>
            </div>
            <div class="list-bottom">
                <el-popover 
                placement="bottom"
                width="570"
                trigger="click"
                v-model="l._popoverVisible">
                    <div>
                        <p>Separate multiple resource with commas</p>
                        <input class="resourse-input" placeholder="Input value" v-model="resourseValue">
                        <div class="resource-btn-div">
                            <div @click="addResource(recentL)" class="add-resource-btn btns">
                                Add Resource
                            </div>
                            <div @click="l._popoverVisible = false" class="cancel-resource-btn btns">
                                Cancel
                            </div>
                        </div>
                    </div>
                    <el-button slot="reference" class="add-browser" @click="recentL=l;l._popoverVisible = true;">
                        <i class="icon-plus"></i>
                    </el-button>
                </el-popover>
                <div class="browser-item" v-for="(name, i) in l.resources" :key="name">
                    {{name}}
                    <i class="icon-trash" @click="delBrowser(l, i)"></i>
                </div>
                <div v-if="l.status == 'building'" @click="denyHandle(l)" class="deny-btn btns">
                    <i class="icon-deny"></i>
                    Deny
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import qs from 'qs';
import axios from 'axios';

export default {
    data() {
        return {
            activeName: '',
            activeListType: 'list',
            listData: [],
            resourseValue: '',
            recentL: {},
            buildingNub: 0,
            idleNub: 0,
            physicalNub: 0,
            virtualNub: 0,
            allNub: 0
        }
    },
    watch:{
        activeName(){
            this.getList();
        }
    },
    methods: {
        getList(){
            let url = '/api/agents';
            if(this.activeName != false){
                url += '?type=' + this.activeName;
            }
            axios.get(url).then((res)=>{
                if(res.status == 200){
                    let buildingNub = 0;
                    let idleNub = 0;
                    let virtualNub = 0;
                    let physicalNub = 0;
                    res.data.forEach(d=>{
                        d._popoverVisible = false;
                        d.status == 'building' && buildingNub++;
                        d.status == 'idle' && idleNub++;
                        d.type == 'virtual' && virtualNub++;
                        d.type == 'physical' && physicalNub++;
                    });
                    this.buildingNub = buildingNub;
                    this.idleNub = idleNub;
                    this.virtualNub = virtualNub;
                    this.physicalNub = physicalNub;
                    this.allNub = res.data.length;

                    this.listData = res.data;
                }
            }).catch((error)=>{
                console.log(error);
            })
        },
        modify(data, cb=()=>{}){
            delete data._popoverVisible;
            data = JSON.parse(JSON.stringify(data));
            let url = `/api/agents/${data.id}`;
            axios.put(url, data, {
              headers: {
                'Content-Type': 'application/json;charset=UTF-8',
              }
            }).then((res)=>{
                if(res.status == 200){
                    cb();
                }
            }).catch((error)=>{
                console.log(error);
            })
        },
        delBrowser(l, i){
            l.resources.splice(i, 1);
            this.modify(l);
        },
        denyHandle(l){
            l.status = 'idle';
            this.modify(l, ()=>{
                this.getList();
            });
        },
        addResource(recentL){
            const resources = recentL.resources;
            const value = this.resourseValue.trim();
            if(value){
                const arr = value.split(',');
                arr.forEach(r => {
                    if(resources.indexOf(r) == -1){
                        resources.push(r);
                    }
                });
                this.modify(recentL);
            }
            this.resourseValue = '';
            recentL._popoverVisible = false;
        }
    },
    mounted: function() {
    }
}
</script>
<style scoped>
.content > div{
    margin-bottom: 18px
}
.top-box{
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
}

.top-item{
    height: 116px;
    width: 270px;
    background: #fff;
    position: relative;
    text-align: center;
}

.top-item.cog{
    background-color: #FFB900;
}

.top-item.cog:hover i{
    transform: rotate(360deg);
    transition: 2s;
}

.top-item.coffee{
    background-color: #7FBC39;
}

.item-icon{
    font-size: 144px;
    opacity: .2;
    color: #fff;
    position: absolute;
    left: 70px;
    bottom: -10px;
}

.top-item-title{
    font-size: 18px;
    font-weight: bold;
    position: absolute;
    left: 20px;
    top: 20px;
    color: #fff;
}

.top-item-nub{
    font-size: 48px;
    position: absolute;
    right: 20px;
    bottom: 10px;
    color: #fff;
}

.right-top-title{
    font-size: 12px;
    height: 60px;
    line-height: 60px;
}

.right-top-nub{
    font-size: 20px;
    height: 50px;
    margin-top: 5px;
}

.tab-search{
    height: 50px;
    background: #fff;
}

.tab-search-pane{
    width: 90px;
    display: inline-block;
    text-align: center;
}

.tab-search-middle{
    border-left: 1px solid #e4e7ed;
    height: 100%;
}

.search-input-box{
    display: inline-block;
    width: 183px;
    height: 32px;
    background-color: #F3F3F3;
    border-width: 1px 0 0 1px;
    border-style: solid;
    border-color: #ddd; 
    margin: 10px 0 0 30px;
    box-sizing: border-box;
    position: relative;
}

.search-input-box i{
    font-size: 20px;
    color: #999;
    top: 5px;
    left: 5px;
    position: absolute;
}

.search-input-box input{
    top: 0;
    left: 30px;
    bottom: 0;
    right: 5px;
    background: transparent;
    border: 0 none;
    outline: 0;
    position: absolute;
    width: 150px;
}

.list-btn{
    font-size: 20px;
    float: right;
    margin: 15px 20px 0 0;
    cursor: pointer;
}

.list-btn.active{
    color: #00B3CF;
}

.list-item{
    height: 108px;
    width: 100%;
    background-color: #fff;
    position: relative;
}

.list-img{
    width: 106px;
    height: 100%;
    background: no-repeat center center;
}

.windows{
    background-image: url(../../assets/osicons/windows.png)
}

.ubuntu{
    background-image: url(../../assets/osicons/ubuntu.png)
}

.suse{
    background-image: url(../../assets/osicons/suse.png)
}

.debian{
    background-image: url(../../assets/osicons/debin.png)
}

.centos{
    background-image: url(../../assets/osicons/cent_os.png)
}

.list-top{
    position: absolute;
    top: 0;
    left: 130px;
    right: 0;
    bottom: 50%;
    line-height: 54px;
}

.list-bottom{
    position: absolute;
    top: 50%;
    left: 130px;
    right: 0;
    bottom: 0%;
}

.list-top-left{
    width: 50%;
    display: inline-block;
}

.list-top i{
    font-size: 16px;
    color: #999;
    vertical-align: middle;
    margin-right: 10px;
}

.list-name{
    font-size: 14px;
    color: #00B3CF;
    font-weight: bold;
    vertical-align: middle;
}

.building{
    background-color: #FF9A2A;
}

.idle{
    background-color: #7FBC39;
}

.building,
.idle{
    padding: 3px 10px;
    margin: 0 30px;
    vertical-align: middle;
    color: #fff;
}

.list-ip,
.list-folder{
    margin-left: 10px;
}

.add-browser{
    display: block;
    background-color: #00B4CF;
    padding: 0 7px;
    height: 28px;
    line-height: 35px;
    float: left;
    cursor: pointer;
}

.add-browser:hover,
.btns:hover{
    background-color: #01869A;
}

.add-browser i{
    font-size: 18px;
    color: white;
}

.browser-item{
    height: 28px;
    line-height: 28px;
    background-color: #EFEFEF;
    display: block;
    padding: 0 7px;
    margin-left: 10px;
    float: left;
}

.browser-item i{
    font-size: 16px;
    font-weight: bold;
    padding-left: 5px;
    top: 2px;
    position: relative;
    cursor: pointer;
}

.btns{
    display: block;
    background-color: #00B4CF;
    padding: 0 15px;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
    color: white;
}

.deny-btn{
    float: right;
    margin-right: 20px;
}

.resourse-input{
    border: 1px solid #979797;
    box-shadow: 1px 1px 3px #ccc inset;
    width: 100%;
    padding: 10px 20px;
    box-sizing: border-box; 
    margin-top: 10px;
    border-radius: 3px;
}

.resource-btn-div{
    margin-top: 20px;
}

.add-resource-btn,
.cancel-resource-btn{
    float: left;
    margin-right: 20px;
}

.cancel-resource-btn{
    background-color: #2D4054;
}

.cancel-resource-btn:hover{
    background-color: #435466;
}

</style>
<style>
.tab-search .el-tabs__item{
    padding: 0 !important;
    height: 50px;
    line-height: 50px;
    box-sizing: border-box;
}

.left-tabs .el-tabs__item.is-active,
.left-tabs .el-tabs__item:hover {
    color: #00B4CF;
    border-bottom: 3px solid #00B4CF !important;
}

.tab-search .el-tabs--card>.el-tabs__header .el-tabs__nav,
.tab-search .el-tabs--card>.el-tabs__header{
    border: 0 none;
}

.tab-search .el-tabs--card>.el-tabs__header .el-tabs__item{
    border-bottom:0 none;
}

.right-tabs.el-tabs--card>.el-tabs__header .el-tabs__item{
    border-left: 0 none;
}

.right-tabs .el-tabs__item.is-active,
.right-tabs .el-tabs__item:hover {
    color: #00B4CF;
}
</style>
